<template>
	<view class="songsquare">
		<mucishead title="歌单广场" :icon="true" color="#000"></mucishead>
		
		<view class="songsquare-top">
			<scroll-view scroll-x="true"  show-scrollbar="false">
				<ul>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
					<li>官方</li>
				</ul>
			</scroll-view>
			</view>
			
			<!-- 热门推荐 -->
			<view class="songsquare-center">
				<view class="songsquare-center-text">热门推荐</view>
				<view class="center">
					<view class="songsquare-center-list" v-for="(item,index) in songsquare" :key="index" @tap="handTolist(item.id)">
						<image :src="item.picUrl" mode="">
						<view class="songsquare-play">播放{{item.playCount | formatCount}}</view>
						</image>
						<view class="songsquare-name">{{item.name}}</view>
					</view>
					<!-- <view class="songsquare-center-list">
						<image src="../../static/images/list.jpg" mode="">
						<view class="songsquare-play">播放 1000</view>
						</image>
						<view class="songsquare-name">有一种情歌叫我爱你一万年</view>
					</view> -->
				</view>
				
			</view>
			
		
	</view>
</template>

<script>
	// 导入公共头部文件
	import mucishead from '../../components/mucishead/mucishead.vue'
	// 导入icon样式表
	import '@/common/iconfont.css'
	
	import {songsquare} from '../../common/api.js'
	export default {
		data() {
			return {
				songsquare:[]
			}
		},
		onLoad(options) {
				// 加载歌单列表数据
			songsquare().then((res)=>{
				this.songsquare = res[1].data.result;
			})
		},
		methods: {
			handTolist:function(listId){
				uni.navigateTo({
					url:'../list/list?listId=' +listId
				})
			}
		},
		components:{
			mucishead
		}
	}
</script>

<style scoped>
	.songsquare{
		background: #fafafa;
	}
	li{
		list-style:none;
	}
.songsquare-top{
	overflow: hidden;
	white-space:nowrap;
	height: 50rpx;
	line-height: 50rpx;
}
scroll-view {
	width:100%;
	overflow-x:auto;
}
scroll-view ul li{
	display: inline-block;
	font-size: 28rpx;
	margin-left: 50rpx;
	color: #686868;
}
/* ::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
} */


.songsquare-center{
	display: inline-block;
	width:680rpx;
	margin: 30rpx;
	background: #FFFFFF;
}
.songsquare-center-text{
	color: #000000;
	font-size: 32rpx;
	font-weight: 900;
	width: 70px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
.center{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.songsquare-center-list{
	margin: 20rpx 20rpx 20rpx 15rpx;
	position: relative;
}
.songsquare-center-list image{
	width: 190rpx;
	height: 190rpx;
	border-radius: 20rpx;
}
.songsquare-play{
	width: 136rpx;
	height: 30rpx;
	line-height: 30rpx;
	background: rgba(0,0,0,0.4);
	text-align: center;
	border-radius: 30rpx;
	position: absolute;
	top: 8rpx;
	right: 10rpx;
	font-size: 24rpx;
	color: #fff;
}
.songsquare-name{
	color: #000;
	font-size: 24rpx;
	width: 180rpx;
	height:64rpx;
	/* white-space: nowrap; */
	overflow: hidden;
}

</style>
